<!--
 * @描述: 
 * @作者: 约訂
 * @Date: 2024-10-31 10:27:48
 * @LastEditTime: 2024-11-27 10:41:32
 * @修改人员: 约訂
-->
<template>
  <!--  v-for="(item, index) in groupChatsList"
    :key="'group_' + index"
    v-show="item?.open" -->
  <div class="chat_main">
    <!-- {{ item.GroupName }} -->
    <!-- v-for="(el, i) in item.userList"
      :key="'user_' + index"
      v-show="el?.open" -->
    <!--  (value) => {
            ChatRef(value, groupChatsList.QuestionUserId);
          } -->
    <div class="user_main">
      <div
        class="text_list"
        @scroll.native="
          (event) => {
            GetScroll(event, groupChatsList.QuestionUserId);
          }
        "
        ref="userItem"
      >
        <ShowText
          v-for="(element, inX) in groupChatsList.list"
          :key="'showText_' + inX"
          :ref="'showText_' + inX"
          :chatMain="element"
          :infoData="infoData"
          :userData="userData"
          @UpText="UpText"
        ></ShowText>
      </div>
      <!--  v-if="el?.open" -->
      <ChatInput
        :itemData="groupChatsList"
        :infoData="infoData"
        :userData="userData"
        ref="chatItem"
      />
    </div>
    <div class="no_reply" @click="OpenNoReply">获取未回复消息</div>
    <el-dialog v-model="dialogTableVisible" title="未回复信息" width="800">
      <el-table
        :data="noReply"
        highlight-current-row
        @current-change="handleCurrentChange"
        height="420"
      >
        <el-table-column property="Time" label="回复时间" width="200" />
        <el-table-column property="SendUserName" label="发送人" width="80" />
        <el-table-column property="Content" label="问题内容" />
      </el-table>
      <div class="page_box">
        <el-pagination
          v-model:current-page="noReplyPage"
          v-model:page-size="noReplyRows"
          :page-sizes="[20, 50, 100]"
          size="small"
          layout="total, sizes, prev, pager, next, jumper"
          :total="noReplyTotal"
          @size-change="OpenNoReply"
          @current-change="OpenNoReply"
        />
      </div>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { toggleDark } from "~/composables";
import { ref, reactive, getCurrentInstance, nextTick, defineEmits } from "vue";
/**聊天内容 */
import ShowText from "./showText.vue";
/**聊天输入框 */
import ChatInput from "./chatInput.vue";
/**element - push 图标 */

const emit = defineEmits(["GetOldData"]);
const { proxy } = getCurrentInstance() as any;
/**回复组件初始数据*/
const inputFormData = ref<any>({});
const dialogTableVisible = ref<boolean>(false);
/** */
const props = defineProps({
  /**需要渲染的所有群 */
  groupChatsList: {
    type: Object, // 数据类型
    default: {}, // 未传值时的默认值
  },
  /**基础信息 */
  infoData: {
    type: Object, // 数据类型
    default: {}, // 未传值时的默认值
  },
  userData: {
    type: Object, // 数据类型
    default: {}, // 未传值时的默认值
  },
});

/**所有的用户ref */
const itemRefList = ref<any[]>([]);
/**所有输入框组件 */
const itemRefInputList = ref<any[]>([]);
/**动态给每个用户添加ref */
const ChatRef = (el: any, itemId: any) => {
  let addIs: boolean = itemRefList.value.some((item: any) => {
    if (item.id == itemId) {
      // console.log(item.id, itemId);

      // item = {
      //   id: itemId,
      //   row: el,
      // };
      return true;
    }
  });

  if (!addIs) {
    if (el) {
      itemRefList.value.push({
        id: itemId,
        row: el,
      });
    }
  }

  console.log(addIs, itemRefList.value);
};
const ChatInputRef = (el: any, itemId: any) => {
  // console.log(el);
  let addIs: boolean = itemRefInputList.value.some((item: any) => {
    if (item.id == itemId) {
      // console.log(item.id, itemId);

      item = {
        id: itemId,
        row: el,
      };
      return true;
    }
  });

  if (!addIs) {
    if (el) {
      itemRefInputList.value.push({
        id: itemId,
        row: el,
      });
    }
  }
};
const chatItem = ref<any>(null);
const userItem = ref<any>(null);
/**获取点击的问题 */
const UpText = (row: any) => {
  chatItem.value.UpText(row);
  // itemRefInputList.value.forEach((item: any) => {

  //   // if (item.id == row.QuestionUserId) {
  //   //   console.log(row.QuestionUserId);

  //   //   item.row.UpText(row);
  //   // }
  // });
};
const AssignmentItem = () => {
  let list: any[] = props.groupChatsList.list;
  let row: any = false;

  list.forEach((item: any) => {
    if (item.Record == 1 && !(item.NoNeedAnswer == 1 || item.IsAnswer == 1)) {
      row = item;
      // console.log();

      return true;
    }
  });
  if (row) {
    chatItem.value.UpText(row, props.groupChatsList.row.QuestionUserId);
  }
};
const noReply = ref<any[]>([]);
const noReplyTotal = ref<number>(0);
const noReplyPage = ref<number>(1);
const noReplyRows = ref<number>(20);
/**获取未回复消息 */
const OpenNoReply = async () => {
  // console.log(props.userData);

  let { rows, Success } = await proxy.$Post(
    "/DealWeChatRecord/WeChatRecordGroupMemberMsgPageList",
    {
      Page: noReplyPage.value,
      Rows: noReplyRows.value,
      GroupInfoId: props.groupChatsList.row.GroupInfoId,
      QuestionUserId: props.groupChatsList.row.QuestionUserId,
      IsAnswer: 0,
      StartTime: -1,
      EndTime: -1,
      UserId: props.userData.UserId,
      UUID: "qoiujkagf456+asdfg",
      // Content:"",
    }
  );
  if (!Success) return;
  console.log(rows);
  noReply.value = rows.Data;
  noReplyTotal.value = rows.Total;
  console.log(noReplyTotal.value);

  dialogTableVisible.value = true;
};
/**监听某个用户打开时滚动条到底 */
const scrollToBottom = async (
  id: any,
  type: any = 1,
  height: any = "bottom"
) => {
  // console.log(itemRefList.value);
  let scrollElem: any;
  // itemRefList.value.some((item: any) => {
  //   // console.log(item.id, id);
  //   // item.row.scrollTop = item.row.scrollHeight;
  //   // console.log(item.row.scrollHeight);

  //   if (item.id == id) {
  //     scrollElem = item.row;
  //     // console.log("更改滚动的盒子", scrollElem);

  //     // scrollElem.scrollTo({ top: scrollElem.scrollHeight, behavior: "smooth" });
  //     return true;
  //   }
  // });
  // let scrollElem = scrollDiv.value;
  // scrollElem.scrollTo({ top: scrollElem.scrollHeight, behavior: "smooth" });
  await nextTick();
  // console.log(userItem.value.scrollHeight);

  if (type == 0) {
    if (height == "bottom") {
      userItem.value.scrollTop = userItem.value.scrollHeight;
    } else {
      userItem.value.scrollTop = height;
    }
  } else {
    if (height == "bottom") {
      userItem.value.scrollTo({
        top: userItem.value.scrollHeight,
        behavior: "smooth",
      });
    } else {
      userItem.value.scrollTo({
        top: height,
        behavior: "smooth",
      });
    }
  }
};
/**新消息滑到底部 */
const ScrollToBottomNew = async (
  id: any,
  type: any = 1,
  height: any = "bottom"
) => {
  console.log(
    userItem.value.scrollHeight,
    userItem.value.scrollTop,
    userItem.value.clientHeight
  );

  await nextTick();
  if (
    userItem.value.scrollHeight -
      userItem.value.scrollTop -
      userItem.value.clientHeight <=
    200
  ) {
    userItem.value.scrollTop = userItem.value.scrollHeight;
  }
};
/**测试开关 */
const sOpen = ref<boolean>(false);
/**监听滚动的位置 */
const GetScroll = (event: any, id: any) => {
  // 获取滚动条离顶部的距离
  let top: any = event.target.scrollTop;
  if (top < 200 && sOpen.value) {
    emit("GetOldData", {
      id: id,
    });
    sOpen.value = false;
  } else if (top >= 200) {
    sOpen.value = true;
  }
  // console.log(top);
};
/**选择聊天记录 */
const handleCurrentChange = (row: any) => {
  // console.log(row);\
  if (row) {
    chatItem.value.UpText(row);
    dialogTableVisible.value = false;
  }
};
defineExpose({
  scrollToBottom,
  inputFormData,
  AssignmentItem,
  ScrollToBottomNew,
});
</script>
<style lang="scss" src="./chat.scss">
</style>